<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入类型" v-model="searchParam.SEARCH_LIKE_name" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" type="default" icon="el-icon-search" @click="searchReset"> 重置</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="handleCreate"> 新增
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         width="60" height="60" class="img" alt=""/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled></el-switch>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"> 编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)"> 删除</el-button>
                    <el-button type="primary" size="mini" @click="handleItem(scope.row.id)"> 子项目</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'新增':'编辑'" width="45%" top="5vh" :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false">
            <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" style="width: 80%">

                <el-form-item label="类型" prop="name">
                    <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入类型"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog()">取消</el-button>
                <el-button size="mini" @click.native="saveFormData()" :loading="editLoading" type="primary">提交
                </el-button>
            </div>
        </el-dialog>

        <!-- 子项目-->
        <!-- 表格-条件筛区域  -->

        <el-dialog :title="formatTypeName" :visible.sync="getFormatTypeVisible" :close-on-click-modal="false"
                   width="65%" top="5vh">
            <div class="filter-container">
                <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                           @click="handleCreateFormat"> 新增
                </el-button>
            </div>
            <el-table :data="tableListFormat" border fit highlight-current-row
                      style="width: 100%;">
                <el-table-column
                    v-for="column in columnFormat"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :align="column.align?column.align:'center'"
                    :min-width="column.minWidth"
                    :sortable="column.sortable"
                    :fixed="column.fixed"
                    :type="column.type"
                    :formatter="column.formatter">
                    <template slot-scope="scope">
                        <!-- 行内格式自定义 -->
                        <span v-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                        <!--默认显示文本-->
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdateType(scope.row)"> 编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDeleteType(scope.row)"> 删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--新增编辑界面-->
            <el-dialog :title="operationFormat?'新增':'编辑'" width="45%" top="5vh" :visible.sync="dialogFormVisibleFormat"
                       :close-on-click-modal="false" z-index="1000">
                <el-form :model="dataFormFormat" label-width="140px" :rules="dataFormRulesFormat" ref="dataFormFormat"
                         style="width: 80%">

                    <el-form-item label="类型" prop="name">
                        <el-input v-model="dataFormFormat.name" auto-complete="off" placeholder="请输入类型"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click.native="closeDialogFormat()">取消</el-button>
                    <el-button size="mini" @click.native="saveFormDataFormat()" :loading="editLoading" type="primary">提交
                    </el-button>
                </div>
            </el-dialog>
            <!-- 表格-页脚区域 -->
            <pagination v-show="tableTotalFormat>0" :total="tableTotalFormat"
                        :page.sync="pageRequestFormat.pageNum"
                        :limit.sync="pageRequestFormat.pageSize" @pagination="showFormatList">
            </pagination>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="itemCloseDialog()">关闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import {
    deleteJdMatchItem,
    deleteJdMatchType,
    editJdMatchItem,
    editJdMatchType,
    getJdMatchTypeList,
    getListByTypeIdPage,
    saveJdMatchItem,
    saveJdMatchType
} from '@/api/modules/match'

export default {
    name: 'matchType',
    components: {
        Pagination,
    },
    directives: {},
    filters: {},
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: {pageNum: 1, pageSize: 10,},
            searchParam: {},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            columns: [
                {prop: 'id', label: '主键id', sortable: false},
                {prop: 'name', label: '类型', sortable: false},
            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            //表单检验规则
            dataFormRules: {
                id: [{required: true, message: '请输入', trigger: 'blur'}],
                name: [{required: true, message: '请输入类型', trigger: 'blur'}],
            },

            //分类子项目
            typeId: '',
            formatTypeName: '分类子项目',
            getFormatTypeVisible: false, // 属性值列表页 隐藏
            operationFormat: true, // true:新增, false:编辑
            pageRequestFormat: {pageNum: 1, pageSize: 10},
            dialogFormVisibleFormat: false, // 默认不显示弹出框
            listLoadingFormat: true,
            tableListFormat: [], // 表格数据源
            tableTotalFormat: 0,
            editLoadingFormat: false,//保存表单时loading框
            columnFormat: [
                {prop: 'id', label: '项目id', sortable: false},
                {prop: 'name', label: '项目名称', sortable: false},
            ],
            // 新增编辑界面数据
            dataFormFormat: {},
            //表单检验规则
            dataFormRulesFormat: {
                id: [{required: true, message: '请输入', trigger: 'blur'}],
                name: [{required: true, message: '请输入类型', trigger: 'blur'}],
            },
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getJdMatchTypeList(this.pageRequest).then(response => {
                response = response.result
                this.tableList = response.content
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出新增表单
        handleCreate() {
            this.operation = true;
            this.initDataForm();
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //【按钮点击】--- 弹出编辑表单
        handleUpdate(row) {
            this.operation = false;
            this.dataForm = Object.assign({}, row)
            //显示编辑菜单
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //保存表单数据
        saveFormData() {
            let res
            this.$refs['dataForm'].validate(async (valid) => {
                if (!valid) {
                    return false;
                }
                this.editLoading = true;
                //【API请求】----保存数据
                if (this.dataForm.id === null || this.dataForm.id === '') {
                    res = await saveJdMatchType(this.dataForm)
                } else {
                    res = await editJdMatchType(this.dataForm)
                }
                try {
                    if (res.code === 0) {
                        this.dialogFormVisible = false// 关闭表单页面
                        this.initDataForm()// 重置表单数据
                        this.getList()// 重新获取表格数据
                        this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
                    }
                    this.editLoading = false// 关闭loading框
                } catch (e) {
                    throw e
                }
            })
        },
        //【按钮点击】---删除行
        handleDelete(row) {
            this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                //【API请求】---- 删除数据
                deleteJdMatchType(row.id).then(() => {
                    this.$message({message: '操作成功', type: 'success'})
                    this.getList();
                })
            }).catch(() => {
                this.$message({message: '操作失败', type: 'error'})
            });
        },

        showFormatList() {
            this.handleItem(this.typeId);
        },
        handleItem(id) {
            this.typeId = id
            this.listLoadingFormat = true
            this.getFormatTypeVisible = true
            const params = {
                typeId: id,
                pageNum: this.pageRequestFormat.pageNum,
                pageSize: this.pageRequestFormat.pageSize
            }
            getListByTypeIdPage(params).then(response => {
                response = response.result
                this.tableListFormat = response.list
                this.tableTotalFormat = response.total
                this.listLoadingFormat = true
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        handleCreateFormat() {
            this.operationFormat = true;
            this.initDataFormFormat();
            this.dialogFormVisibleFormat = true
            this.$nextTick(() => {
                this.$refs['dataFormFormat'].clearValidate()
                this.editLoadingFormat = false;
            })
        },
        handleUpdateType(row) {
            this.operationFormat = false;
            this.dataFormFormat = Object.assign({}, row)
            //显示编辑菜单
            this.dialogFormVisibleFormat = true
            this.$nextTick(() => {
                this.$refs['dataFormFormat'].clearValidate()
                this.editLoadingFormat = false;
            })
        },
        handleDeleteType(row) {
            this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                //【API请求】---- 删除数据
                deleteJdMatchItem(row.id).then(() => {
                    this.$message({message: '操作成功', type: 'success'})
                    this.showFormatList();
                })
            }).catch((res) => {
                if (res === "cancel") {
                    this.$message({message: '取消删除', type: 'error'})
                }
            });
        },
        saveFormDataFormat() {
            let res
            this.$refs['dataFormFormat'].validate(async (valid) => {
                if (!valid) {
                    return false;
                }
                this.editLoadingFormat = true;
                this.dataFormFormat.typeId = this.typeId
                //【API请求】----保存数据
                if (this.dataFormFormat.id === null || this.dataFormFormat.id === '') {
                    res = await saveJdMatchItem(this.dataFormFormat)
                } else {
                    res = await editJdMatchItem(this.dataFormFormat)
                }
                try {
                    if (res.code === 0) {
                        this.dialogFormVisibleFormat = false// 关闭表单页面
                        this.initDataFormFormat()// 重置表单数据
                        this.showFormatList()// 重新获取表格数据
                        this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
                    }
                    this.editLoadingFormat = false// 关闭loading框
                } catch (e) {
                    throw e
                }
            })
        },
        //初始化表单数据，重新渲染
        initDataForm() {
            this.dataForm = {
                id: '',
                name: '',
            };
        },
        //初始化表单数据，重新渲染
        initDataFormFormat() {
            this.dataFormFormat = {
                id: '',
                name: '',
                typeId: '',
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },
        closeDialogFormat() {
            this.$refs['dataFormFormat'].resetFields();
            this.dialogFormVisibleFormat = false
        },
        itemCloseDialog() {
            this.getFormatTypeVisible = false
        },
        // 重置按钮
        searchReset() {
            this.searchParam = {}
            this.pageRequest = {pageNum: 1, pageSize: 10}
            this.getList()
            this.typeId = ''
        },
    },
    created() {
        this.getList();
    },
}
</script>
